<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>
<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
import { getMonday, getDaysLateDateStr } from '@/utils/commonUtils';
import { listOrderTjPayPm } from "@/api/business/order";
const animationDuration = 6000
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data() {
    return {
      chart: null,
      seriesA: null,
      seriesB: null,
      seriesC: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initValue()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initValue() {
      let Monday = getMonday();
      let Tuesday = getDaysLateDateStr(new Date(Monday),1);
      let Wednesday = getDaysLateDateStr(new Date(Monday),2);
      let Thursday = getDaysLateDateStr(new Date(Monday),3);
      let Friday = getDaysLateDateStr(new Date(Monday),4);
      let Saturday = getDaysLateDateStr(new Date(Monday),5);
      let Sunday = getDaysLateDateStr(new Date(Monday),6);
      let orderParam = {status: 1, createAtstart: Monday, createAtend: Sunday};
      let dateAry = ['周一('+Monday.substr(8)+')', 
                  '周二('+Tuesday.substr(8)+')', 
                  '周三('+Wednesday.substr(8)+')', 
                  '周四('+Thursday.substr(8)+')', 
                  '周五('+Friday.substr(8)+')', 
                  '周六('+Saturday.substr(8)+')', 
                  '周日('+Sunday.substr(8)+')'];
                  listOrderTjPayPm(orderParam).then(response => {
        let shopName1 = response.data[0]&&response.data[0].shopName?response.data[0].shopName:'';
        let shopName2 = response.data[1]&&response.data[1].shopName?response.data[1].shopName:'';
        let shopName3 = response.data[2]&&response.data[2].shopName?response.data[2].shopName:'';
        let ordernumAry1 = [0, 0, 0, 0, 0, 0, 0];
        let ordernumAry2 = [0, 0, 0, 0, 0, 0, 0];
        let ordernumAry3 = [0, 0, 0, 0, 0, 0, 0];
        response.data.forEach(item =>{
          if (shopName1===item.shopName&&Monday===item.tjdt) {
            ordernumAry1.splice(0,1,item.payAmount);
          }
          if (shopName1===item.shopName&&Tuesday===item.tjdt) {
            ordernumAry1.splice(1,1,item.payAmount);
          }
          if (shopName1===item.shopName&&Wednesday===item.tjdt) {
            ordernumAry1.splice(2,1,item.payAmount);
          }
          if (shopName1===item.shopName&&Thursday===item.tjdt) {
            ordernumAry1.splice(3,1,item.payAmount);
          }
          if (shopName1===item.shopName&&Friday===item.tjdt) {
            ordernumAry1.splice(4,1,item.payAmount);
          }
          if (shopName1===item.shopName&&Saturday===item.tjdt) {
            ordernumAry1.splice(5,1,item.payAmount);
          }
          if (shopName1===item.shopName&&Sunday===item.tjdt) {
            ordernumAry1.splice(6,1,item.payAmount);
          }

          if (shopName2===item.shopName&&Monday===item.tjdt) {
            ordernumAry2.splice(0,1,item.payAmount);
          }
          if (shopName2===item.shopName&&Tuesday===item.tjdt) {
            ordernumAry2.splice(1,1,item.payAmount);
          }
          if (shopName2===item.shopName&&Wednesday===item.tjdt) {
            ordernumAry2.splice(2,1,item.payAmount);
          }
          if (shopName2===item.shopName&&Thursday===item.tjdt) {
            ordernumAry2.splice(3,1,item.payAmount);
          }
          if (shopName2===item.shopName&&Friday===item.tjdt) {
            ordernumAry2.splice(4,1,item.payAmount);
          }
          if (shopName2===item.shopName&&Saturday===item.tjdt) {
            ordernumAry2.splice(5,1,item.payAmount);
          }
          if (shopName2===item.shopName&&Sunday===item.tjdt) {
            ordernumAry2.splice(6,1,item.payAmount);
          }

          if (shopName3===item.shopName&&Monday===item.tjdt) {
            ordernumAry3.splice(0,1,item.payAmount);
          }
          if (shopName3===item.shopName&&Tuesday===item.tjdt) {
            ordernumAry3.splice(1,1,item.payAmount);
          }
          if (shopName3===item.shopName&&Wednesday===item.tjdt) {
            ordernumAry3.splice(2,1,item.payAmount);
          }
          if (shopName3===item.shopName&&Thursday===item.tjdt) {
            ordernumAry3.splice(3,1,item.payAmount);
          }
          if (shopName3===item.shopName&&Friday===item.tjdt) {
            ordernumAry3.splice(4,1,item.payAmount);
          }
          if (shopName3===item.shopName&&Saturday===item.tjdt) {
            ordernumAry3.splice(5,1,item.payAmount);
          }
          if (shopName3===item.shopName&&Sunday===item.tjdt) {
            ordernumAry3.splice(6,1,item.payAmount);
          }
        })        
        this.initChart(dateAry,shopName1,shopName2,shopName3,ordernumAry1,ordernumAry2,ordernumAry3);
      });
    },
    initChart(dateAry, collectionA, collectionB, collectionC, ordernumAry1, ordernumAry2, ordernumAry3) {
      this.chart = echarts.init(this.$el, 'macarons')
      this.chart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          top: 10,
          left: '2%',
          right: '2%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: dateAry,
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
          type: 'value',
          axisTick: {
            show: false
          }
        }],
        series: [{
          name: collectionA,
          type: 'bar',
          stack: 'vistors',
          barWidth: '60%',
          data: ordernumAry1,
          animationDuration
        }, {
          name: collectionB,
          type: 'bar',
          stack: 'vistors',
          barWidth: '60%',
          data: ordernumAry2,
          animationDuration
        }, {
          name: collectionC,
          type: 'bar',
          stack: 'vistors',
          barWidth: '60%',
          data: ordernumAry3,
          animationDuration
        }]
      })
    }
  }
}
</script>